<template>
    <div>
        <!-- nav导航栏 -->
        <NAV></NAV>
        <div class="contanter">
            <div class="left-box">
                <div class="headImage">
                    <el-avatar :size="180"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                </div>
                <div class="word">
                    <div class="item">资料</div>
                    <div class="item">技能</div>
                    <div class="item">作品</div>
                    <div class="item">爱好</div>
                    <div class="item">评价</div>
                </div>
            </div>
            <div class="right-box">
                
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import NAV from '@/compont/nav.vue'

</script>
<style lang="less" scoped>
.contanter{
    width: 100%;
    height: 1040px;
    display: flex;
    overflow: hidden;
    .left-box{
        width: 20%;
        height: 100%;
        flex: 2;
        background-color: rgba(92,92,92,0.8);
        position: fixed;
        .headImage{
            text-align: center;
            margin-top: 130px;
        }
        .word{
            text-align: center;
            margin-top: 50px;
            .item{
                margin-top: 25px;
                color: #fff;
            }
        }
    }
    .right-box{
        width: 80%;
        height: 100%;
        flex: 8;
        background-color: rgba(245,246,247,0.8);
    }
}
</style>